<!-- 商务信息表主组件 -->
<template>
    <div>
        <div class="bnheader">
            <div class="bnheader-left">
                <i class="el-icon-arrow-left"></i>
                <span>返回</span>
            </div>
        </div>


        <div class="body">
            <!-- 商务信息概览 -->
            <div class="ProjectName">
                <div class="ProjectName1">
                    <img src="../../../assets/images/logo.png" alt="">
                    <p class="p1p1">项目名称项目名称项目名称</p>
                    <p class="p1p2">项目编号&nbsp;123456</p>
                </div>
                <div class="ProjectName2">
                    <div>
                        <p class="p2p1">单位名称</p>
                        <p class="p2p2">北京嘉实商务统计南京分部统计组</p>
                    </div>
                    <div>
                        <p class="p2p3">项目详细地址</p>
                        <p class="p2p4">北京市丰台区顺家大道45号</p>
                    </div>
                </div>
                <div class="ProjectName3">
                    <div>
                        <p>项目经理</p>
                        <p>北京大航实业</p>
                    </div>
                    <div style="border-right: 1px solid #cdd0dd;">
                        <p>项目所属区域</p>
                        <p>北京</p>
                    </div>
                    <div>
                        <p>业态</p>
                        <p>北京大航实业</p>
                    </div>
                    <div style="border-right: 1px solid #cdd0dd;">
                        <p>初始合同额</p>
                        <p>300000</p>
                    </div>
                </div>
                <div class="ProjectName4">
                    <div>
                        <p class="p4p1">项目所在地</p>
                        <p class="p4p2">项目所在地项目所在地</p>
                    </div>
                    <div>
                        <p class="p4p3">项目所在地</p>
                        <p class="p4p4">项目所在地项目所在地</p>
                    </div>
                </div>
            </div>
            <!-- 标题 -->
            <div class="title">
                <div :class="{ 'selected': isp1 }">
                    <p @click="showBusinessInfoForm">项目商务信息</p>
                </div>
                <div :class="{ 'selected': !isp1 }">
                    <p @click="showSideLeter">补充协议</p>
                </div>
            </div>
            <!-- 表格 -->
            <div class="bnform">
                <projectForm v-show="showBusinessForm" />
                <SideLeter v-show="showLeter" />
            </div>
        </div>
    </div>
</template>
  
<script>
import projectForm from './projectForm.vue';
import SideLeter from './projectSideLeter.vue';

export default {
    components: {
        projectForm,
        SideLeter
    },
    data() {
        return {
            // 1.点击标题切换【商务信息表】和【补充协议】
            showBusinessForm: true,
            showLeter: false,
            isp1: true,
            // 2.项目请求参数
            bpObj: {
                page: '1',
                projectCode: null,
                size: '20',
            }
        };
    },
    mounted() {
        // 1.获取projectBussinessInfoList/index页面传递过来的query参数
        this.bpObj.projectCode = this.$route.query.projectCode;
        // console.log(105, this.bpObj.projectCode); //105 'C110500650300020230009'
        this.getProjectBusinessInfoDetail()
    },
    methods: {
        // 1.点击标题切换【商务信息表】和【补充协议】
        showBusinessInfoForm() {
            this.showBusinessForm = true;
            this.showLeter = false;
            this.isp1 = true;
        },
        showSideLeter() {
            this.showBusinessForm = false;
            this.showLeter = true;
            this.isp1 = false;
        },

        // 2.请求获取项目商务信息详情
        async getProjectBusinessInfoDetail() {
            await this.$api.getProjectBusinessInfoDetail(this.bpObj).then(res => {
                console.log(112, res);
            })
        }

    },
}


</script>

<style lang="scss" scoped>
.bnheader {
    width: 100%;
    height: 60px;
    font-size: 18px;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px #E5E6EB;
    // border-bottom: 2px solid #d0d6e0;

    .bnheader-left {
        width: 248px;
        height: 48px;
        margin: 6px 40px;
        line-height: 48px;

        p {
            margin: 5px 5px;
        }
    }
}

.body {
    width: 100%;
    // background: #ECF0F6;
    background-color: white;


    .ProjectName {
        width: 95%;
        height: 180px;
        margin: 12px auto;
        background: linear-gradient(179deg, #d6e4fc 0%, rgba(232, 247, 252, 0.5) 100%);
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid #F6F6F6;
        display: flex;
        padding: 25px 50px;
        margin-bottom: 50px;

        .ProjectName1 {
            width: 300px;
            height: 124px;
            // background-color: #fff;
            border-right: 1px solid #cdd0dd;

            img {
                width: 48px;
                height: 48px;
                background: linear-gradient(360deg, #6B9DFC 0%, #4BCDF6 100%);
                border-radius: 4px 4px 4px 4px;
                opacity: 1;
                margin-bottom: 16px;
            }

            .p1p1 {
                font-size: 16px;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #1D2129;
                line-height: 19px;
                margin-bottom: 5px;
            }

            .p1p2 {
                font-size: 12px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #86909C;
                line-height: 14px;

            }

        }

        .ProjectName2 {
            width: 350px;
            height: 120px;
            display: flex;
            flex-direction: column;
            padding: 0 50px;

            div {
                margin: auto;
                width: 250px;
                height: 50px;
                margin-bottom: 33px;

                .p2p1,
                .p2p3 {
                    font-size: 14px;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 500;
                    color: #4e5560;
                    line-height: 22px;
                }

                .p2p2,
                .p2p4 {
                    font-size: 14px;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 500;
                    color: #1D2129;
                    line-height: 22px;
                }
            }


        }

        .ProjectName3 {
            width: 380px;
            height: 124px;
            display: flex;
            flex-wrap: wrap;

            div {
                width: 190px;
                height: 40px;
                border-left: 1px solid #cdd0dd;
                // border-right: 1px solid #cdd0dd;
                margin: 5px 0 35px 0;
                padding: 0 50px;
                margin-bottom: 33px;

            }
        }

        .ProjectName4 {
            width: 350px;
            height: 120px;
            display: flex;
            flex-direction: column;
            padding: 0 50px;

            div {
                margin: auto;
                width: 250px;
                height: 50px;
                margin-bottom: 33px;
                margin-top: 3px;


                .p4p1,
                .p4p3 {
                    font-size: 14px;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 500;
                    color: #4e5560;
                    line-height: 22px;
                }

                .p4p2,
                .p4p4 {
                    font-size: 14px;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 500;
                    color: #1D2129;
                    line-height: 22px;
                }
            }
        }

    }

    .title {
        display: flex;
        margin: 0 40px;
        align-items: center;

        & div {
            height: 25px;
            margin-right: 20px;
            cursor: pointer;
        }

        & .selected {
            position: relative;

            &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 10%;
                width: 80%;
                border-bottom: 2px solid blue;
            }
        }
    }

    .bnform {
        width: 1640px;
        margin: 0 auto;
    }



}
</style>